<template>
  <div class="h5Page">
    <div class="wrapper">
      <div class="registerFormCon">
        <div ref="registerForm">
          <div class="putgroup clearfix" v-show="regMode=='phone'">
            <div class="areacodeput">
              <input @focus="showlist" v-model="selectValue" class="icon-arrow" autocomplete="off" />
              <drop-down
                @inputValue="getInputValue"
                @item-click="itemClick"
                :itemlist="datalist"
                :placeholder="placeholder"
                :nodatatext="nodatatext"
                :isShow="isShow"
                style="width:100%;"
              ></drop-down>
            </div>
            <div style="overflow: hidden;">
              <input
                class="comput concatLeft"
                v-model="account"
                placeholder="请输入手机号码"
                autocomplete="off"
              />
            </div>
            <p class="errortext"></p>
          </div>
          <div class="putgroup" v-show="regMode=='email'">
            <input class="comput" v-model="account" placeholder="请输入邮箱地址" autocomplete="off" />
            <p class="errortext"></p>
          </div>
          <div class="putgroup">
            <nc-slider @callback="ncHandle"></nc-slider>
          </div>
          <div class="putgroup">
            <div class="codeput">
              <div
                v-show="sendAuthCode"
                class="getcodes active"
                @click="sendCode"
                :disabled="!this.ncPass"
              >获取验证码</div>
              <div v-show="!sendAuthCode" class="getcodes">{{auth_time}}s</div>
              <div style="overflow: hidden;">
                <input
                  class="comput concatRight"
                  v-model="code"
                  placeholder="6位数字验证码"
                  autocomplete="off"
                />
              </div>
            </div>
            <p class="errortext"></p>
          </div>
          <div class="putgroup">
            <input
              class="comput"
              v-model="password"
              type="password"
              placeholder="请设置6-21位(数字+字母组合)密码"
              autocomplete="off"
            />
            <p class="errortext"></p>
          </div>
          <div class="putgroup">
            <input class="comput" v-model="rePassword" type="password" placeholder="请确认密码" />
            <p class="errortext"></p>
          </div>
          <div class="putgroup">
            <input class="comput" v-model="invitcode" placeholder="请输入邀请码（选填）" />
            <p class="errortext"></p>
          </div>
          <label
            class="icon-checkbox agreebox"
            :class="isAgree?'active':''"
            @click="isAgree=!isAgree"
          >
            请阅读并同意
            <span @click.stop="link2clause">《使用条款》</span>和
            <span @click.stop="link2agreement">《隐私政策》</span>
          </label>
          <div class="btnRegister" @click="verification">注册</div>
          <div class="switchMode" @click="switchMode">{{regMode=='phone'?'邮箱注册':'手机注册'}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import dropDown from "@/components/dropdown";
import { api } from "@/api/api";
import md5 from "js-md5";
import "lib-flexible";
import NC from "@/components/nc";

export default {
  components: {
    dropDown,
    "nc-slider": NC
  },
  data() {
    return {
      itemlist: [],
      datalist: [],
      placeholder: "请输入国家/地区拼写",
      nodatatext: "暂无数据",
      selectValue: "+86",
      isShow: false,
      account: "",
      code: "",
      password: "",
      rePassword: "",
      invitcode: "",
      regMode: "phone",
      sendAuthCode: true,
      auth_time: 0,
      onceToken: "",
      userSource: 1,
      isAgree: true,
      ncInstance: null,
      ncPass: false,
      ncData: null
    };
  },
  created() {
    this.invitcode = this.$route.query.invite;
  },
  methods: {
    ncReset() {
      this.ncData = null;
      this.ncPass = false;
      this.ncInstance && this.ncInstance.reset();
    },
    ncHandle(nc, data) {
      this.ncInstance = nc;
      this.ncData = data;
      this.ncPass = true;
    },
    link2clause() {
      this.$router.push("/h5/clause");
    },
    link2agreement() {
      this.$router.push("/h5/agreement");
    },
    reset() {
      this.account = "";
      this.code = "";
      this.password = "";
      this.rePassword = "";
      // this.invitcode = "";
    },
    switchMode() {
      this.regMode = this.regMode == "phone" ? "email" : "phone";
      this.reset();
      this.ncReset();
    },
    getAuthCode() {
      this.sendAuthCode = false;
      this.auth_time = 120;
      var auth_timetimer = setInterval(() => {
        this.auth_time--;
        if (this.auth_time <= 0) {
          this.sendAuthCode = true;
          clearInterval(auth_timetimer);
        }
      }, 1000);
    },
    itemClick(data) {
      this.selectValue = data.code;
      this.isShow = false;
    },
    getInputValue(searchvalue) {
      if (searchvalue == "") {
        this.datalist = this.itemlist;
        return;
      }
      let itemlist = [];
      // 请求获取筛选列表
      this.itemlist.forEach((item, index) => {
        if (item.code.indexOf(searchvalue) != -1) {
          itemlist.push(item);
        } else if (item.name.indexOf(searchvalue) != -1) {
          itemlist.push(item);
        }
      });
      this.datalist = itemlist;
      // this.$set(this.datalist, itemlist);
    },
    showlist() {
      this.isShow = true;
    },
    verification() {
      let that = this;
      let flag = false;
      if (that.account == "") {
        that.$layer.msg("账号不能为空");
        flag = true;
      } else if (that.password == "") {
        that.$layer.msg("密码不能为空");
        flag = true;
      } else if (that.password !== that.rePassword) {
        that.$layer.msg("请确认两次密码相同");
        flag = true;
      } else if (
        !/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,21}$/.test(that.password)
      ) {
        that.$layer.msg("密码格式有误");
        flag = true;
      } else if (!that.isAgree) {
        that.$layer.msg("请勾选同意服务协议和隐私条款");
        flag = true;
      }
      if (!flag) {
        that.regist();
      }
    },
    //注册
    async regist() {
      let that = this;
      let ncData = this.ncData;
      let res = await api.register({
        account: that.account,
        areaCode: that.selectValue,
        inviteCode: that.invitcode,
        onceToken: that.onceToken,
        password: md5(that.password),
        verifyCode: that.code,
        userSource: that.userSource,
      });
      if (res.data.code == 0) {
        that.$layer.msg("注册成功");
        that.$router.push({
          path: "/h5/download"
        });
      } else {
        this.ncReset();
        that.$layer.msg(res.data.msg);
        that.createOnceToken();
      }
    },
    sendCode() {
      if (this.regMode == "email") {
        this.sendEmailCode();
      } else {
        this.sendPhoneCode();
      }
    },
    //发送验证码
    async sendEmailCode() {
      let that = this;
      let ncData = this.ncData;
      let res = await api.sendEmailCodelogin({
        email: that.account,
        type: "S",
        ncToken: ncData && ncData.nc_token,
        sessionId: ncData && ncData.sessionid,
        sig: ncData && ncData.sig,
        'scene':'nc_login'
      });
      if (res.data.code == 0) {
        that.getAuthCode();
        that.$layer.msg("发送成功");
      } else {
        that.$layer.msg(res.data.msg);
      }
    },
    //发送手机验证码
    async sendPhoneCode() {
      let that = this;
      let ncData = this.ncData;
      let res = await api.sendPhoneCodelogin({
        areaCode: that.selectValue,
        phone: that.account,
        type: "S",
        ncToken: ncData && ncData.nc_token,
        sessionId: ncData && ncData.sessionid,
        sig: ncData && ncData.sig,
        'scene':'nc_login'
      });
      if (res.data.code == 0) {
        that.$layer.msg("发送成功");
        that.getAuthCode();
      } else {
        that.$layer.msg(res.data.msg);
      }
    },
    //获取一次性token
    async createOnceToken() {
      let that = this;
      let res = await api.createOnceToken();
      if (res.data.code == 0) {
        that.onceToken = res.data.data.resultToken;
      }
    },
    //获取区号
    async getAreacode() {
      let that = this;
      let res = await api.selectList({
        category: "AREA_CODE",
        language: "zh_CN"
      });
      if (res.data.code == 0) {
        that.datalist = [];
        res.data.data.forEach((item, index) => {
          that.datalist.push({
            code: item.value,
            name: item.name
          });
        });
        that.itemlist = that.datalist;
      }
    }
  },
  mounted() {
    this.createOnceToken();
    this.getAreacode();
  }
};
</script>
<style lang="less" scoped>
.h5Page {
  min-height: 100vh;
  // padding-top: 2.3467rem;
  box-sizing: border-box;
  .nc_scale{
    height:96px !important;
  }
  .wrapper {
    min-height: 100vh;
    padding: 5.6267rem 0.6667rem 2rem;
    background: #4c38d8 url(../../assets/images/h5/bg.png) no-repeat top / 100%;
    box-sizing: border-box;
  }
  /deep/input,
  /deep/textarea {
    border: 0;
    -webkit-appearance: none;
  }
}
.registerFormCon {
  .putgroup {
    background: #f8f9fd;
    margin-bottom: 0.2667rem;
    border-radius: 0.08rem;
    // overflow: hidden;
  }
  .comput {
    width: 100%;
    height: 1.3333rem;
    line-height: 150%;
    background: rgba(248, 249, 253, 1);
    border-radius: 0.08rem;
    font-size: 0.3733rem;
    text-indent: 0.4rem;
    &:focus {
      border-color: transparent;
    }
  }
  /deep/.areacodeput {
    width: 1.9733rem;
    height: 1.3333rem;
    line-height: 1.3333rem;
    background: rgba(248, 249, 253, 1);
    margin-right: 0;
    border-radius: 4px 0 0 4px;
    border-right: 0 none;
    color: #2d395c;
    padding-right: 0.64rem;
    border: 0 none;
    input {
      font-size: 0.4rem;
      height: 1.3333rem;
      line-height: 150%;
    }
    &::before {
      position: absolute;
      content: "";
      width: 0.3733rem;
      height: 0.2133rem;
      left: 1.3267rem;
      top: 0.56rem;
      background: url(../../assets/images/arrow_bottom@2x.png) no-repeat top /
        100%;
    }
    &::after {
      position: absolute;
      content: "";
      width: 0.0267rem;
      height: 0.7467rem;
      top: 0.2933rem;
      left: 1.9733rem;
      background: #abb1cb;
    }
    .list-item-name {
      display: block !important;
    }
  }
  .getcodes {
    position: relative;
    float: right;
    width: 2.64rem;
    height: 1.3333rem;
    line-height: 1.3333rem;
    background: rgba(248, 249, 253, 1);
    border-radius: 0 4px 4px 0;
    border-left: 0 none;
    font-size: 0.4rem;
    text-align: center;
    &::after {
      position: absolute;
      content: "";
      width: 0.0267rem;
      height: 0.7467rem;
      top: 0.2933rem;
      left: 0;
      background: #abb1cb;
    }
    &.active {
      color: #2D8DFE;
    }
    &[disabled] {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }
  .concatLeft {
    border-radius: 0 4px 4px 0;
    border-left: 0 none;
  }
  .concatRight {
    border-radius: 4px 0 0 4px;
    border-right: 0 none;
  }
  .agreebox {
    height: 0.4533rem;
    font-size: 0.32rem;
    font-familyA: PingFangSC-Regular;
    color: #fff;
    line-height: 0.4533rem;
    margin-top: 0.16rem;
    > span {
      font-size: 0.32rem;
    }
  }
  .icon-checkbox {
    position: relative;
    padding-left: 0.6133rem;
    &::before {
      position: absolute;
      content: "";
      left: 0;
      top: 1px;
      width: 0.4rem;
      height: 0.4rem;
      background: url()
        no-repeat top / 100%;
      box-sizing: border-box;
    }
    &.active::before {
      background: url()
        no-repeat top / 100%;
    }
  }
  .btnRegister {
    height: 1.3333rem;
    margin: 0 auto;
    background: linear-gradient(
      0deg,
      rgba(108, 88, 255, 1),
      rgba(170, 157, 255, 1)
    );
    border-radius: 0.1333rem;
    margin-top: 0.7733rem;
    text-align: center;
    font-size: 0.4267rem;
    font-familyA: PingFangSC-Medium;
    font-weight: 500;
    color: #fff;
    text-shadow: 0px 2px 3px rgba(78, 62, 185, 0.48);
    line-height: 1.3333rem;
    cursor: pointer;
  }
  .switchMode {
    height: 0.5333rem;
    font-size: 0.3733rem;
    font-familyA: PingFangSC-Regular;
    color: #fff;
    line-height: 0.5333rem;
    text-align: center;
    margin-top: 0.4533rem;
  }
}
</style>
<style lang="less">
.vl-notify.vl-notify-msg {
  font-size: 0.4267rem;
  padding: 0.2667rem 0.4267rem;
}
</style>